<script lang="ts" setup>
import { onUnmounted, type ModelRef } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import extensions from './ExtensionConfig'

const contentModel: ModelRef<string|undefined|null> = defineModel()

const editor = useEditor({
  // 注册扩展
  extensions: extensions,
  content: contentModel.value,
  onUpdate({ editor }) {
    // contentModel.value = JSON.stringify(editor.getJSON())
    contentModel.value = editor.getHTML()
  },
  // 初始化后将光标置于编辑器中
  autofocus: true,
  // 使文本可编辑（默认值为true）
  editable: true,
  // 防止加载默认CSS（反正也没多少内容）
  injectCSS: false,
})

onUnmounted(() => {
  editor.value?.destroy() 
})
</script>

<template>
  <editor-content :editor="editor" />
</template>

<style lang="scss" scoped>
</style>
